<template>
  <div>
    <el-card class="box-card">
      <!-- 表头 -->
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home/merchant' }">商户列表</el-breadcrumb-item>
          <el-breadcrumb-item>商家详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 用户信息 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        :label-position="labelPosition"
        label-width="80px"
      >
        <el-form-item label="联系人" prop="businessContact">
          <el-input v-model="ruleForm.businessContact" style="width:600px" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="businessContactPhone">
          <el-input v-model="ruleForm.businessContactPhone" style="width:600px" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="商家名称" prop="businessName">
          <el-input v-model="ruleForm.businessName" style="width:600px" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="businessAddress">
          <el-input v-model="ruleForm.businessAddress" disabled style="width:600px" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="营业时间" prop="businessHours">
          <el-input v-model="ruleForm.businessHours" style="width:600px" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="服务介绍" prop="businessIntroduced">
          <el-input v-model="ruleForm.businessIntroduced" style="width:600px" maxlength="50"></el-input>
        </el-form-item>
        <!-- <el-button type="primary" @click="delet">跳转测试页面</el-button> -->
        <!-- 分割线条 -->
        <el-divider></el-divider>
        <!-- 店铺照片多图上传 :http-request="uploadFile" -->
        <el-form-item label="店铺照片" prop="merchantList[]">
          <el-upload
            :action="upadteurl"
            list-type="picture-card"
            :limit="9"
            :on-preview="handlePictureCardPreview"
            :file-list="bannerlist"
            :on-change="merchantChange"
            :on-remove="merchantEmove"
            :on-success="merchantPhoto"
            :class="{'merchant':merchant}"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>
        <!-- 店铺封面照片 -->
        <el-form-item label="店铺封面" prop="businessCoverImg">
          <el-upload
            :action="upadteurl"
            list-type="picture-card"
            :limit="1"
            :on-preview="handlePictureCardPreview"
            :file-list="fileListshop"
            :on-success="shopSuccess"
            :on-change="handleAddChange"
            :on-remove="ChangeEmove"
            :class="{'showhide':hideUpload}"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>

        <!-- 营业执照上传 -->
        <el-form-item label="营业执照" prop="businessLicense">
          <el-upload
            :action="upadteurl"
            list-type="picture-card"
            :limit="1"
            :on-preview="handlePictureCardPreview"
            :file-list="fileList"
            :on-change="licenseChange"
            :on-success="photosSuccess"
            :on-remove="licenseEmove"
            :class="{'license':license}"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt />
          </el-dialog>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          <el-button @click="resetForm()">返回</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import base from "@/views/api/base";
export default {
  data() {
    return {
      // 店铺照片显示和隐藏
      hideUpload: false,
      limitCount: 1,
      // 营业执照显示和隐藏
      license: false,
      limitCount: 1,
      //营业执照
      merchant: false,
      // 参数信息
      labelPosition: "left",
      dialogVisible: false, //图片查看
      dialogImageUrl: "", //图片地址
      upadteurl: "", //图片上传地址
      ruleForm: {
        businessId: 0,
        businessContact: "",
        businessContactPhone: "",
        businessName: "",
        businessAddress: "",
        businessHours: "",
        businessIntroduced: "",
        businessCoverImg: "", //商家封面图片
        businessLicense: "", //营业执照
        businessBannerList: [], //回显图片
        businessBanner: [] //营业执照
      },
      bannerlist: [], //商家信息
      disabled: true, //禁用被修改

      fileList: [], //图片回显

      fileListshop: [], //商家封面照片

      merchantList: [], //上传多张图片

      formDate: "",
      hideELUpload: "",

      //商家验证信息
      rules: {
        businessContact: [
          { required: true, message: "请输入联系人", trigger: "change" }
        ],
        businessContactPhone: [
          { required: true, message: "请输入商家电话", trigger: "change" }
        ],
        businessName: [
          { required: true, message: "请输入商家名字", trigger: "change" }
        ],
        businessAddress: [
          { required: true, message: "请输入营业地址", trigger: "change" }
        ],
        businessHours: [
          { required: true, message: "请输入商家营业时间", trigger: "change" }
        ],
        businessIntroduced: [
          { required: true, message: "请输入商家服务介绍", trigger: "change" }
        ],
        Storephotos: [
          { required: true, message: "请输入商家商家图片", trigger: "change" }
        ],
        // 验证店铺照片
        merchantList: [
          { required: true, message: "请上传店铺照片", trigger: "change" }
        ],
        // 验证店铺封面
        businessCoverImg: [
          { required: true, message: "请上传店铺照片", trigger: "change" }
        ],
        // 验证营业执照
        businessLicense: [
          { required: true, message: "请上传店铺照片", trigger: "change" }
        ]
      }
    };
  },
  mounted() {
    this.merchantObj();
    this.upadteurl = base.sq + "/yuanjiu/upload/uploadImg";
  },
  methods: {
    // 查看商家详情
    merchantObj() {
      this.$http.article
        .lookmerchant({ petBusinessId: this.$route.query.businessId })
        .then(res => {
          this.ruleForm.businessId = res.result.businessId; //回显用户Id
          this.ruleForm.businessContact = res.result.businessContact;
          this.ruleForm.businessContactPhone = res.result.businessContactPhone;
          this.ruleForm.businessName = res.result.businessName;
          this.ruleForm.businessAddress = res.result.businessAddress;
          this.ruleForm.businessHours = res.result.businessHours; //时间
          this.ruleForm.businessIntroduced = res.result.businessIntroduced;
          console.log("获取商家详情", res);

          //-----------------营业执照-----------------------
          //营业执照_赋值
          this.ruleForm.businessLicense = res.result.businessLicense;
          //回显营业执照
          this.fileList.push({ url: res.result.businessLicense });
          // 回显图片是否为空
          if (this.ruleForm.businessLicense) this.license = true;

          //-----------------店铺照片-----------------------
          // 商家照片回显修改
          this.bannerlist = res.result.businessBannerList;
          // 商家照片赋值修改
          this.merchantList = res.result.businessBanner;
          // 回显图片是否为空
          if (this.bannerlist.length>=9) this.merchant = true;
          else this.merchant = false;
          console.log('获取数组长度',this.bannerlist.length)

          //-----------------店铺封面图片-----------------------
          //商家封面图片回显
          this.fileListshop.push({ url: res.result.businessCoverImg });
          //商家图片赋值回去
          this.ruleForm.businessCoverImg = res.result.businessCoverImg;
          // 回显图片是否为空
          if (this.ruleForm.businessCoverImg) this.hideUpload = true;
        });
    },

    // 图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //-----------------店铺照片-----------------------
    // 店铺照片
    merchantPhoto(res) {
      this.merchantList.push(res.result);
      console.log("上传商家图片", res.result);
    },

    // 上传change事件
    merchantChange(file, fileList) {
      this.merchant = fileList.length >= 9;
      console.log("change事件", this.merchant);
    },

    // 店铺封面移出事件
    merchantEmove(file, fileList) {
      // 图片数量小于5展示上传按钮
      this.merchant = fileList.length >= 9;
      // 移出图片修改图片
      let photolist = [];
      for (let i in fileList) {
        photolist.push(fileList[i].url);
      }
      this.merchantList = photolist;
    },

    //-----------------店铺封面图片-----------------------

    // 店铺封面图片
    shopSuccess(res) {
      this.ruleForm.businessCoverImg = res.result;
      console.log("店铺封面照片", res);
    },

    // 上传change事件
    handleAddChange(file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount;
    },

    // 店铺封面移出事件
    ChangeEmove(file, fileList) {
      this.hideUpload = fileList.length >= this.limitCount;
    },

    //----------------营业执照图片-----------------------
    //营业执照上传成功
    photosSuccess(res) {
      this.ruleForm.businessLicense = res.result;
      console.log("res", res);
    },
    // 上传change事件
    licenseChange(file, fileList) {
      this.license = fileList.length >= this.limitCount;
    },
    // 移出事件
    licenseEmove(file, fileList) {
      this.license = fileList.length >= this.limitCount;
    },

    // 查看修改商户信息
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.ruleForm.businessBanner = this.merchantList;
          // console.log("我是删除照片的", this.merchantList);
          // // 修改商户信息
          this.$http.article.updatamerchant(this.ruleForm).then(res => {
            // 是否新增成功
            console.log("是否新增成功数据", res);
            if (res.code == 200) {
              this.$router.push("/home/merchant");
              this.$message.success(res.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 重置按钮信息
    resetForm() {
      this.$router.push('/home/merchant')
      // this.$refs[formName].resetFields();
    }
  }
};
</script>

<style lang="scss" scoped>
.bg {
  width: 100%;
  height: 100%;
  background-color: #f4f7fd;
  //   overflow: hidden;
}
.box-card {
  //   display: flex;
  //   justify-content: center;
  width: 98%;
  margin: 0 auto;
  margin-top: 10px;
}
// 店铺封面照片
.showhide ::v-deep .el-upload--picture-card {
  display: none;
}
// 营业执照
.license ::v-deep .el-upload--picture-card {
  display: none;
}
// 店铺照片
.merchant ::v-deep .el-upload--picture-card {
  display: none;
}
</style>